<template>
  <div>
    <div>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="spannel">
            <em>{{this.pnum}}</em>
            <span>篇</span>
            <b>总资源数</b>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="spannel scolor01">
            <em>{{this.dnum}}</em>
            <span>篇</span>
            <b>未发布资源数</b>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="spannel scolor02">
            <em>{{this.cnum}}</em>
            <span>条</span>
            <b>评论总数</b>
          </div>
        </el-col>
      </el-row>
    </div>

    <div>
      <el-row :gutter="20" class="curve-pie">
        <el-col :span="16">
          <div class="gragh_pannel" id="curve_show"></div>
        </el-col>
        <el-col :span="8">
          <div class="gragh_pannel" id="pie_show"></div>
        </el-col>
      </el-row>
    </div>

    <div>
      <el-row>
        <el-col :span="24">
          <div class="res_pannel" id="res_show"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
// import _ from 'lodash'
export default {
  data() {
    return {
      // 资源数
      pnum: 0,
      dnum: 0,
      // 评论数
      cnum: 0,
      userinfo: {},
      aList_all: [{
        count: 36,
        date: '2021-04-13'
      }, {
        count: 52,
        date: '2021-04-14'
      }, {
        count: 78,
        date: '2021-04-15'
      }, {
        count: 85,
        date: '2021-04-16'
      }, {
        count: 65,
        date: '2021-04-17'
      }, {
        count: 72,
        date: '2021-04-18'
      }, {
        count: 88,
        date: '2021-04-19'
      }, {
        count: 64,
        date: '2021-04-20'
      }, {
        count: 72,
        date: '2021-04-21'
      }, {
        count: 90,
        date: '2021-04-22'
      }, {
        count: 96,
        date: '2021-04-23'
      }, {
        count: 100,
        date: '2021-04-24'
      }, {
        count: 102,
        date: '2021-04-25'
      }, {
        count: 110,
        date: '2021-04-26'
      }, {
        count: 123,
        date: '2021-04-27'
      }, {
        count: 100,
        date: '2021-04-28'
      }, {
        count: 132,
        date: '2021-04-29'
      }, {
        count: 146,
        date: '2021-04-30'
      }, {
        count: 200,
        date: '2021-05-01'
      }, {
        count: 180,
        date: '2021-05-02'
      }, {
        count: 163,
        date: '2021-05-03'
      }, {
        count: 110,
        date: '2021-05-04'
      }, {
        count: 80,
        date: '2021-05-05'
      }, {
        count: 82,
        date: '2021-05-06'
      }, {
        count: 70,
        date: '2021-05-07'
      }, {
        count: 65,
        date: '2021-05-08'
      }, {
        count: 54,
        date: '2021-05-09'
      }, {
        count: 40,
        date: '2021-05-10'
      }, {
        count: 45,
        date: '2021-05-11'
      }, {
        count: 38,
        date: '2021-05-12'
      }],
      aCount: [],
      aDate: []
    }
  },
  mounted() {
    var oChart = echarts.init(document.getElementById('curve_show'))

    for (var i = 0; i < this.aList_all.length; i++) {
      this.aCount.push(this.aList_all[i].count)
      this.aDate.push(this.aList_all[i].date)
    }

    var chartopt = {
      title: {
        text: '日新增评论数',
        left: 'center',
        top: '10'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['新增评论'],
        top: '40'
      },
      toolbox: {
        show: true,
        feature: {
          mark: {
            show: true
          },
          dataView: {
            show: true,
            readOnly: false
          },
          magicType: {
            show: true,
            type: ['line', 'bar']
          },
          restore: {
            show: true
          },
          saveAsImage: {
            show: true
          }
        }
      },
      calculable: true,
      xAxis: [{
        name: '日',
        type: 'category',
        boundaryGap: false,
        data: this.aDate
      }],
      yAxis: [{
        name: '日新增评论数',
        type: 'value'
      }],
      series: [{
        name: '新增评论',
        type: 'line',
        smooth: true,
        itemStyle: {
          normal: {
            areaStyle: {
              type: 'default'
            },
            color: '#f80'
          },
          lineStyle: {
            color: '#f80'
          }
        },
        data: this.aCount
      }],
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(255,136,0,0.39)'
          }, {
            offset: 0.34,
            color: 'rgba(255,180,0,0.25)'
          }, {
            offset: 1,
            color: 'rgba(255,222,0,0.00)'
          }])

        }
      },
      grid: {
        show: true,
        x: 50,
        x2: 50,
        y: 80,
        height: 220
      }
    }

    oChart.setOption(chartopt)

    var oPie = echarts.init(document.getElementById('pie_show'))
    var oPieopt = {
      title: {
        top: 10,
        text: '分类文章数量比',
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565'],
      legend: {
        x: 'center',
        top: 65,
        data: ['学习资料', '闲置书籍', '多余硬件', '破解软件']
      },
      toolbox: {
        show: true,
        x: 'center',
        top: 35,
        feature: {
          mark: {
            show: true
          },
          dataView: {
            show: true,
            readOnly: false
          },
          magicType: {
            show: true,
            type: ['pie', 'funnel'],
            option: {
              funnel: {
                x: '25%',
                width: '50%',
                funnelAlign: 'left',
                max: 1548
              }
            }
          },
          restore: {
            show: true
          },
          saveAsImage: {
            show: true
          }
        }
      },
      calculable: true,
      series: [{
        name: '访问来源',
        type: 'pie',
        radius: ['45%', '60%'],
        center: ['50%', '65%'],
        data: [{
          value: 300,
          name: '学习资料'
        }, {
          value: 100,
          name: '闲置书籍'
        }, {
          value: 260,
          name: '多余硬件'
        }, {
          value: 180,
          name: '破解软件'
        }]
      }]
    }
    oPie.setOption(oPieopt)
    var resChart = echarts.init(document.getElementById('res_show'))
    var oReschart = {
      title: {
        text: '本周每日新增资源',
        left: 'center',
        top: '10'
      },
      tooltip: {
        trigger: 'axis'
      },
      toolbox: {
        show: true,
        feature: {
          mark: {
            show: true
          },
          dataView: {
            show: true,
            readOnly: false
          },
          magicType: {
            show: true,
            type: ['line', 'bar']
          },
          restore: {
            show: true
          },
          saveAsImage: {
            show: true
          }
        }
      },
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [
            120,
            {
              value: 400,
              itemStyle: {
                color: '#a90000'
              }
            },
            150,
            80,
            70,
            110,
            130
          ],
          type: 'bar'
        }
      ]
    }
    resChart.setOption(oReschart)
  },
  created() {
    this.getUserId()
    this.getuserbyid()
    this.getresnum()
    this.getcomment()
  },
  methods: {
    // 获取用户信息
    getUserId() {
      this.userinfo = JSON.parse(sessionStorage.getItem('myuser'))
    },
    // 根据id查询用户
    async getuserbyid() {
      var that = this
      const uid = this.userinfo._id
      // console.log(uid)
      await this.$http.get('/users/' + uid).then((res) => {
        // console.log(res)
        window.sessionStorage.setItem('myuser', JSON.stringify(res.data))
      }).catch((err) => {
        const messg = err.response.data.message
        // console.log(err.response.data)
        that.$message({
          showClose: true,
          message: messg,
          type: 'error'
        })
      })
    },
    // 查询资源数
    async getresnum() {
      const res = await this.$http.get('/posts/count')
      // console.log(res)
      this.pnum = res.data.postCount
      this.dnum = res.data.draftCount
    },
    // 获取评论数量
    async getcomment() {
      const res = await this.$http.get('/comments/count')
      // console.log(res)
      this.cnum = res.data.commentCount
    }
  }
}
</script>

<style scoped>
.spannel{
	height:100px;
	overflow:hidden;
	text-align:center;
  position:relative;
  background-color: #fff;
  border:1px solid #e7e7e9;
  margin-bottom:20px;
}

.spannel em{
  font-style:normal;
	font-size:50px;
	line-height:50px;
	display:inline-block;
	margin:10px 0 0 20px;
	font-family:'Arial';
	color:#83a2ed;
}

.spannel span{
	font-size:14px;
	display:inline-block;
	color:#83a2ed;
	margin-left:10px;
}

.spannel b{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	line-height:24px;
	background:#e5e5e5;
	color:#333;
	font-size:14px;
	font-weight:normal;
}

.scolor01 em,.scolor01 span{
	color:#6ac6e2;
}

.scolor02 em,.scolor02 span{
	color:#5fd9de;
}

.scolor03 em,.scolor03 span{
	color:#58d88e;
}

.gragh_pannel{
  height:360px;
  border:1px solid #e7e7e9;
  background-color: #fff!important;
  margin-bottom:20px;
}

.res_pannel {
  height:300px;
  border:1px solid #e7e7e9;
  background-color: #fff!important;
}

</style>
